<template>
    <div class="page-container">
        <div>
            <div class="operation-container">
                <el-button type="primary" @click="onPrint">打印</el-button>
            </div>
            <div id="deviceDispatchPrint" class="print-container">
                <div class="print-title">项目投标申请单</div>
                <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="print-label">项目编码</td>
                        <td class="print-input-content2">
                            {{form.projectCode}}
                        </td>
                        <td class="print-label">项目名称</td>
                        <td class="print-input-content2">
                            {{form.projectName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">限价(元)</td>
                        <td class="print-input-content2">
                            {{form.limitPrice == null ? '' : form.limitPrice/100}}
                        </td>
                        <td class="print-label">业主名称</td>
                        <td class="print-input-content2">
                            {{form.customName}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">联系人</td>
                        <td class="print-input-content2">
                            {{form.contactsName}}
                        </td>
                        <td class="print-label">联系方式</td>
                        <td class="print-input-content2">
                            {{form.contactsPhone}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">开标负责人</td>
                        <td class="print-input-content2">
                            {{form.openCheckMan}}
                        </td>
                        <td class="print-label">开标日期</td>
                        <td class="print-input-content2">
                            {{formatUtil.dateFormat(form.openBidDate)}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">开标地点</td>
                        <td class="print-input-content" colspan="3">
                            {{form.openBidAddress}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">商务标负责人</td>
                        <td class="print-input-content2">
                            {{form.businessBidMan}}
                        </td>
                        <td class="print-label">商务标完成时间</td>
                        <td class="print-input-content2">
                            {{formatUtil.dateFormat(form.businessBidFinishDate)}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label">技术标负责人</td>
                        <td class="print-input-content2">
                            {{form.technologyBidMan}}
                        </td>
                        <td class="print-label">技术标完成时间</td>
                        <td class="print-input-content2">
                            {{formatUtil.dateFormat(form.technologyBidFinishDate)}}
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label-line" colspan="4">
                            技术标审批信息
                        </td>
                    </tr>
                    <tr>
                        <td class="print-table-line" colspan="4">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>审批人</th>
                                        <th>流程节点名称</th>
                                        <th>审批结果</th>
                                        <th>审批意见</th>
                                        <th>审批时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in flowTechList">
                                        <td>{{item.checkName}}</td>
                                        <td>{{item.nodeName}}</td>
                                        <td>{{item.dealType}}</td>
                                        <td>{{item.remark}}</td>
                                        <td>{{formatUtil.timeFormat(item.endTime)}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="print-label-line" colspan="4">
                            商务标审批信息
                        </td>
                    </tr>
                    <tr>
                        <td class="print-table-line" colspan="4">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                    <tr>
                                        <th>审批人</th>
                                        <th>流程节点名称</th>
                                        <th>审批结果</th>
                                        <th>审批意见</th>
                                        <th>审批时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in flowBusList">
                                        <td>{{item.checkName}}</td>
                                        <td>{{item.nodeName}}</td>
                                        <td>{{item.dealType}}</td>
                                        <td>{{item.remark}}</td>
                                        <td>{{formatUtil.timeFormat(item.endTime)}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import printJS from 'print-js'
import formatUtil from '@/utils/format.js'

export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    components: {

    },
    setup(props, ctx) {

        const state = reactive({
            form: {},
            flowBusList: [],
            flowTechList: []
        })

        const loadDetail = () => {
            http.fetchForm({
                url: '/activiti/flow/getDetails',
                data: {
                    taskId: props.id,
                    taskType: 'bid_bus,bid_tech'
                },
            }).then((res) => {
                let data = res.data.detail;
                console.log(data);
                state.form = data;
                state.flowTechList = res.data.flowHisTech;
                state.flowBusList = res.data.flowHisBus;
            })
        }

        const onPrint = () => {
            printJS({
                printable: 'deviceDispatchPrint',
                type: 'html',
                targetStyles: ['*'],
                style: '@page{margin-top: 1mm;margin-bottom: 1mm;}'
            })
        }

        onMounted(() => {
            loadDetail();
        });

        return {
            formatUtil,
            ...toRefs(state),
            onPrint
        }
    }
}
</script>
<style scoped>
@import '@/assets/css/print.css';
</style>